 <template>
  <basic-container>
    <el-container>
      <el-aside width="20%">
        <el-scrollbar style="height: 700px">
          <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick">
          </avue-tree>
        </el-scrollbar>
      </el-aside>
      <el-container>
        <el-header>
          <el-button v-if="savePermission" type="primary" size="small" icon="el-icon-plus" @click="addTop">新增顶级</el-button>
          <el-button v-if="!isLast && savePermission" type="primary" size="small" icon="el-icon-plus" @click="addChildren">新增下级</el-button>
          <el-button v-if="delPermission" type="danger" size="small" icon="el-icon-delete" @click="handleDelete">删除</el-button>
        </el-header>
        <el-main>
          <avue-form ref="form" v-model="formData" :option="formOption" @submit="submit">
            <template slot-scope="scope" slot="menuForm">
              <el-button icon="el-icon-delete" size="small" @click="emptyChange">清 空</el-button>
            </template>
          </avue-form>
        </el-main>
      </el-container>
    </el-container>

  </basic-container>
</template>

<script>
import { isShowButton } from '@/api/showButton'
import { list, view, save, del } from '@/api/system/city'
import { option } from '@/table/system/city'
import { validatenull } from '@/util/validate'
export default {
  data () {
    return {
      savePermission: false,
      delPermission: false,
      treeData: [],
      formData: {},
      isLast: false,
      treeOption: {
        lazy: true,
        nodeKey: 'key',
        menu: false,
        addBtn: false,
        treeLoad: function (node, resolve) {
          const pcode = (node.level !== 0) ? node.data.id : '-1';
          list({'pcode': pcode}).then((res)=>{
            if (res.data.status){
              resolve(res.data.data.map(ele => {
                return Object.assign(ele, {
                  leaf: !ele.hasChildren
                })
              }));
            }else{
              this.$message.error(res.data.message)
            }
          });
        },
        props: {
          label: 'title',
          value: 'key'
        }
      },
      formOption: option
    }
  },
  created () {
    isShowButton(this.$route.meta.id, 'SYSTEM_CITY_SAVE').then(res => {
      this.formOption.detail = !res
      this.savePermission = res
    })

    isShowButton(this.$route.meta.id, 'SYSTEM_CITY_DELETE').then(res => {
      this.delPermission = res
    })
  },
  methods: {
    initTree(){
      list({'pcode': '-1'}).then((res)=>{
        if (res.data.status){
          this.treeData = res.data.data.map(ele => {
            return Object.assign(ele, {
              leaf: !ele.hasChildren
            })
          });
        }
      });
    },
    nodeClick(data){
      view(data.key).then((res)=>{
        if (res.data.status){
          this.formData = res.data.data;

          let preIndex = 0;
          let endIndex = 2;
          let length = 2;
          if (this.formData.rankd === 1){
            preIndex = 0;
            endIndex = 2;
            length = 2;
          } else if (this.formData.rankd === 2){
            preIndex = 2;
            endIndex = 4;
            length = 2;
          } else if (this.formData.rankd === 3){
            preIndex = 4;
            endIndex = 6;
            length = 2;
          } else if (this.formData.rankd === 4){
            preIndex = 6;
            endIndex = 9;
            length = 3;
          } else if (this.formData.rankd === 5){
            preIndex = 9;
            endIndex = 12;
            length = 3;
          }

          const code =this.findObject(this.formOption.column,'code');
          code.prepend = this.formData.code.slice(0,preIndex);
          code.append = this.formData.code.slice(endIndex);
          this.formData.completeCode = this.formData.code;
          this.formData.code = this.formData.code.slice(preIndex,endIndex);
          code.maxlength = length;
          code.minlength = length;
          if (this.formData.rankd >= 5){
            this.isLast = true;
          }else {
            this.isLast = false;
          }
          this.formOption.submitText = '修 改';
        }else {
          this.$message.error(res.data.message);
        }
      });
    },
    emptyChange(){
      const rankd = this.formData.rankd;
      const pname = this.formData.pname;
      this.$refs.form.resetForm();
      this.formData.countryCode = 'CHN';
      this.formData.rankd = rankd;
      this.formData.pname = pname;
    },
    handleDelete(){
      if (validatenull(this.formData.id)) {
        this.$message.warning("请先选择一项地区");
        return;
      }

      this.$confirm("确定将【"+this.formData.name+"】删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        del(this.formData.id).then((res)=>{
          if (res.data.status){
            this.formData = {};
            this.$message.success("操作成功");
            this.initTree();
          }
        });
      })
    },
    addChildren(){
      if (validatenull(this.formData.id)) {
        this.$message.warning("请先选择一项地区");
        return;
      }

      const codeCol =this.findObject(this.formOption.column,'code');

      const code = this.formData.completeCode;
      const rankd = this.formData.rankd;
      const name = this.formData.name;

      this.$refs.form.resetForm();
      this.formData.id='';

      this.formData.countryCode = 'CHN';
      this.formData.rankd = rankd+1;
      this.formData.pname = name;
      this.formData.pcode = code;

      let length = 2;
      if (this.formData.rankd === 2){
        codeCol.prepend = code.slice(0,2);
        codeCol.append = code.slice(4);
        length = 2;
      } else if (this.formData.rankd === 3){
        codeCol.prepend = code.slice(0,4);
        codeCol.append = code.slice(6);
        length = 2;
      } else if (this.formData.rankd === 4){
        codeCol.prepend = code.slice(0,6);
        codeCol.append = code.slice(9);
        length = 3;
      } else if (this.formData.rankd === 5){
        codeCol.prepend = code.slice(0,9);
        codeCol.append = code.slice(12);
        length = 3;
      }else {
        codeCol.prepend = code;
        codeCol.append = '';
        length = 3;
      }

      codeCol.maxlength = length;
      codeCol.minlength = length;

      this.formOption.submitText = '新 增';
    },
    addTop(){
      this.$refs.form.resetForm();
      this.formData.id='';
      this.formData.countryCode = 'CHN';
      this.formData.rankd = 1;
      const code = this.findObject(this.formOption.column,'code');
      code.prepend = '';
      code.append = '0000000000';

      this.formOption.submitText = '新 增';
    },
    submit(form,done){
      const code = this.findObject(this.formOption.column,'code');
      form.code = code.prepend + form.code + code.append;
      form.pcode = this.formData.pcode?this.formData.pcode:'-1';
      form.id = this.formData.id;

      save(form).then((res)=>{
        if (res.data.status){
          this.$message.success("操作成功");
          this.initTree();
        }else{
          this.$message.error(res.data.message);
        }
        done();
      }).catch(()=>{
        done();
      });
    }
  }
}
</script>

<style lang="scss" scoped>
</style>